<template>
    <div class="container">
        <!-- 位置 -->
        <div class="position-x mt20 flex-align">
            <span>您的位置：首页</span>
            <span>></span>
            <span>游戏</span>
        </div>
        <!-- ranking-top -->
        <div class="ranking-top bgf ovn mt20">
            <nuxt-link class="ellipsis" v-for="i in 10" :key="i" to="">阿喀琉斯配电间苦力怕萨达</nuxt-link>
        </div>
        <!--  -->
        <div class="ovn mt20">
            <div class="ranking-l">
                <img src="~/assets/images/ranking/ranking1.png" alt="">
                <div class="ranking-li">
                    <!-- <img src="~/assets/images/ranking/ricon10.png" alt=""> -->
                    <img src="~/assets/images/ranking/ricon11.png" alt="">
                </div>
                <div class="ranking-li">
                    <img src="~/assets/images/ranking/ricon20.png" alt="">
                    <img src="~/assets/images/ranking/ricon21.png" alt="">
                </div>
                <div class="ranking-li">
                    <img src="~/assets/images/ranking/ricon30.png" alt="">
                    <img src="~/assets/images/ranking/ricon31.png" alt="">
                </div>
            </div>
            <div class="ranking-r">
                <div>
                    <img src="~/assets/images/ranking/rt.png" alt="">
                </div>
                <ul class="ranking-ru">
                    <li v-for="i in 10" :key="i">
                        <nuxt-link class="flex-align" to="">
                            <img class="ranking-rup" src="~/assets/images/ranking/r1.png" alt="">
                            <div class="ranking-rimg imgr100">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </div>
                            <div class="flex1 ovn ml20">
                                <h3 class="fz30">无神之界</h3>
                                <div class="fz18 c828">
                                    <span>1547.56M</span>
                                    <span class="ml10">|</span>
                                    <span class="ml10">角色扮演</span>
                                </div>
                                <div class="ranking-text fz18 c828">
                                    <p>无神之界是一款西方魔幻系列的mmo风格角色扮演游戏，这个游戏的画风十分的 细腻真实 选择好自 从五大核心的</p>
                                </div>
                                <div class="ranking-label flex flex-wrap">
                                    <span class="flex-center-align" v-for="(item, index) in 3">即时战斗</span>
                                </div>
                            </div>
                            <div class="ranking-rg">立即查看</div>
                        </nuxt-link>
                    </li>
                </ul>
            </div>
        </div>
        <!--  -->
        <!-- ranking-list -->
        <div class="ranking-list bgf mt20 pt20 pl20 pb10">
            <div class="ranking-t">
                <h3 class="fz22">近期大作</h3>
            </div>
            <ul class="flex flex-wrap">
                <li class="flex-align" v-for="item in 10" :key="item">
                    <div class="xcollection-limg imgr100">
                        <img class="img100" src="~/assets/images/img2.png" alt="">
                    </div>
                    <div class="flex1 xcollection-linfo ml10">
                        <h3 class="fz16">王者荣耀</h3>
                        <p class="fz12 mt5">赛程竞速|V 1.2版本</p>
                        <p class="fz12 mt5">中文|700MB</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
let pageInfo = useWebsiteStore().getgetMenuInfo('文章');// 调用 store 实例的方法
useSeoMeta({
    title: () => pageInfo.page_title,
    keywords: () => pageInfo.page_keywords,
    description: () => pageInfo.page_description,
})
let navList = ref([
    { id: 0, name: '全部' },
    { id: 1, name: '游戏合集' },
    { id: 2, name: '软件合集' },
    { id: 3, name: 'H5合集' },
])
let navCurrent = ref(0);
let params = reactive({
    id: '',
    page: 1,
    limit: 10,
})
let total = ref(0);
let dataList = ref([]);

//切换页码时变化
const handleCurrentChange = (val) => {
    params.page = val;
    getList();
}
</script>
<style lang="scss" scoped>
.position-x {
    position: relative;
    padding: 0 22px;
    height: 44px;
    background: #FFFFFF;
    font-size: 14px;
    color: #626262;
}

.ranking-top {
    padding: 20px 0 10px 20px;

    a {
        display: inline-block;
        margin: 0 6px 0 0;
        width: 160px;
        line-height: 20px;
        font-size: 18px;
    }
}

.ranking-l {
    float: left;
    width: 292px;

    .ranking-li {
        height: 90px;
        background-color: #FFFFFF;
        border-bottom: 1px solid #BBBBBB;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.ranking-r {
    float: right;
    width: 884px;

    .ranking-ru {

        li {
            position: relative;
            padding: 16px 0 16px 60px;
            background: #FFFFFF;
            border-bottom: 1px solid #BBBBBB;

            &:last-child {
                border-bottom: none;
            }

            .ranking-rup {
                position: absolute;
                left: 19px;
                top: 11px;
            }

            .ranking-text {
                margin-top: 15px;
                height: 50px;

            }

            .ranking-label {
                span {
                    position: relative;
                    white-space: nowrap;
                    margin-top: 10px;
                    margin-right: 16px;
                    padding: 0 10px;
                    height: 35px;
                    border: 1px solid #FFAD65;
                    font-size: 18px;
                    color: #FFAD65;
                }
            }

            .ranking-rg {
                width: 160px;
                height: 50px;
                padding-left: 60px;
                line-height: 50px;
                background-image: url("~/assets/images/ranking/rs.png");
                background-repeat: no-repeat;
                background-position: 20px center;
                background-size: 29px 40px;
                background-color: #FF8E2B;
                border-radius: 40px 0 0 40px;
                font-size: 22px;
                color: #FFFFFF;
            }

        }
    }
}

.ranking-list {

    .ranking-t {
        padding-left: 20px;
        height: 51px;
        line-height: 51px;
        border-left: 4px solid #FF8E2B;
    }

    li {
        padding: 15px 0;
        width: 235px;
    }

    .xcollection-limg {}

    .xcollection-linfo {}
}
</style>